<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会员卡等级购买</title>
[#include "/includes/header.html" /]
<style>
.placeholder {
   	margin: 5px;
   	padding: 0 10px;
   	background-color: #ebebeb;
   	height: 2.3em;
   	line-height: 2.3em;
   	text-align: center;
   	color: #cfcfcf;
}
.active{
	color: #ffffff;
	background-color:#1aad19;
}
</style>
</head>
<body>
<header class='demos-header'>
  	<h3 class="demos-title">购买会员等级</h3>
</header>
<div class="weui-panel">
   	<!--  <div class="weui-panel__hd">充值金额</div>
   	<div class="weui-panel__bd">
		<div class="weui-flex">
		  	<div style="cursor: pointer;" class="weui-flex__item"><div c="0.01" class="placeholder">￥50.00</div></div>
		  	<div style="cursor: pointer;" class="weui-flex__item"><div c="100" class="placeholder">￥100.00</div></div>
		  	<div style="cursor: pointer;" class="weui-flex__item"><div c="300" class="placeholder">￥300.00</div></div>
		</div>
   	</div> -->
   	
	<!-- <div class="weui-panel__hd">会员等级列表</div> -->
      <div class="weui-panel__bd weui-cells weui-cells_radio">
      	[#list ranks as rank]
      	<label class="weui-cell weui-check__label" for="x${rank_index}">
          <div class="weui-cell__bd">
            <p>充值${rank.first_charge}成为${rank.rank_name},享受${rank.rank_discount}折优惠,购买满${rank.rank_cash_full}返现金${rank.rank_cash_rward}</p>
          </div>
          <div class="weui-cell__ft">
            <input type="radio" class="weui-check" name="radio1" value="${rank.id}" id="x${rank_index}" [#if rank_index==0]checked="checked" [/#if]/>
            <span class="weui-icon-checked"></span>
          </div>
        </label>
      	[/#list]
      </div>
      <div class="content-padded">
	    <a id="recharge_btn" href="javascript:void(0);" class="weui-btn weui-btn_primary">充值</a>
	</div>
</div>        
[#include "includes/footer.html"/]
<script type="text/javascript">
$("#recharge_btn").click(function(){
	var rankId = $("input[name='radio1']:checked").val();
	if(rankId == undefined || rankId == ""){
		showMsg("请选择会员等级");
		return;
	}
	var params = {};
	params.rankId = rankId;
	params.cardId = '${cardId}';
	$.post("${webctx}/pay", params, function(data){
  		var resp = data;
		if(resp.code != 200){
			$.alert(resp.msg==null ? "系统错误" : resp.msg);
			return;
		}
		var json = resp.data;
		if(json.returnMsg=='OK'){
			WeixinJSBridge.invoke(
		       'getBrandWCPayRequest', {
		            "appId":json.appId,     		//公众号名称，由商户传入     
		            "nonceStr":json.nonceStr, 		//随机串     
		            "package":json.packageValue,
		            "paySign":json.paySign, 		//微信签名 
		            "signType":"MD5",         		//微信签名方式：     
		            "timeStamp":json.timeStamp      //时间戳，自1970年以来的秒数     
		     	},
		       	function(res){     
		            if(res.err_msg == "get_brand_wcpay_request:ok" ) {
		            	//使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
		            	//location.href="${webctx}/pay/success";
		            	showMsg("支付成功", function(){
		            		location.href = "${webctx}/user";						            		
		            	});
		            }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
		            	//$.alert("您取消了支付", "text");
		            }else {
		            	$.alert("支付失败，" + res.err_msg);
		            }     
		       	}
		    );
		}
	});
});
</script>
</body>
</html>